<template>
    <div id="nav-top-box">
        <div class="nav-container">
            <nav>
                <div class="left">
                    <ul>
                        <li><img src="@/assets/images/logo-text-green.2137bfaa.png" alt=""></li>
                        <li> <router-link to="/">首页</router-link></li>
                        <li @mouseenter="flag = true" @mouseleave="flag = false">
                            <a href="#">课程分类
                                <svg t="1752843040896" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="5422" width="16" height="16">
                                    <path
                                        d="M917.4 302.8c-14.2-14.2-37.2-14.2-51.4 0L518.6 650.3c-2.9 2.8-7.5 2.8-10.3 0L160.8 302.8c-14.2-14.2-37.2-14.2-51.4 0-14.2 14.2-14.2 37.2 0 51.4l347.4 347.4c15.6 15.6 36 23.4 56.5 23.4s41-7.8 56.5-23.4l347.4-347.4c14.3-14.2 14.3-37.2 0.2-51.4z"
                                        p-id="5423" fill="#000"></path>
                                </svg>
                            </a>
                            <ClassifyList id="classify-list" v-show="flag" @mouseenter="flag = true"
                                @mouseleave="flag = false" />
                        </li>
                        <li><a href="https://stu.myhope365.com/index"> 教学管理云平台</a></li>
                    </ul>
                </div>
                <div class="right">
                    <div class="search-box">
                        <input type="text" placeholder="搜索课程~" v-model="keyword" @keyup.enter="goToSearch">
                        <span @click="goToSearch">
                            <svg t="1752821185583" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="5311">
                                <path
                                    d="M865.367771 918.147657l-192.746057-207.111314c-57.7536 45.056-148.567771 89.322057-226.830628 89.322057C256.146286 800.3584 102.4 643.364571 102.4 449.682286c0-193.682286 153.746286-350.705371 343.391086-350.705372s343.391086 157.023086 343.391085 350.705372c0 76.361143-24.1664 146.870857-64.775314 204.419657l197.193143 200.791771-56.232229 63.2832zM445.820343 172.266057c-150.059886 0-271.652571 124.196571-271.652572 277.386972 0 153.219657 121.592686 277.416229 271.623315 277.416228 149.972114 0 271.594057-124.196571 271.594057-277.416228 0-153.1904-121.621943-277.357714-271.594057-277.357715z"
                                    p-id="5312"></path>
                            </svg>
                        </span>
                    </div>
                    <div class="chart-box" @click="goToChart">
                        <a-badge :count="$store.state.count">
                            <a href="#" class="head-example"></a>
                        </a-badge>
                        <div>
                            <a-icon type="shopping-cart" style="font-size:24px;color:#00B278;" />
                        </div>

                    </div>
                    <!-- login/register box -->

                    <div class="lr-box" v-show="$store.state.isLogin == false">
                        <span @click="showModal">登录/注册</span>
                    </div>

                    <a-popover placement="bottom">
                        <template slot="content">
                            <div class="userApproveItem">
                                <router-link to="/personal">个人中心</router-link>
                            </div>
                            <div class="userApproveItem">
                                <router-link to="/personal">我的课程</router-link>
                            </div>
                            <div class="userApproveItem">我的订单</div>
                            <div class="userApproveItem" @click="userLogout">退出登录</div>
                        </template>

                        <div class="user-info-box" v-show="$store.state.isLogin">
                            <div class="user-avatar"><a-avatar icon="user" :src="$store.state.userInfo.avatarUrl" />
                            </div>
                            <div class="user-info">
                                <div>{{ $store.state.userInfo.nickname }}</div>
                                <div>青铜会员</div>
                            </div>
                        </div>
                    </a-popover>

                    <!-- 登录注册弹窗 -->
                    <a-modal v-model="$store.state.showModal" @ok="hideModel" :footer="null">
                        <loginRegCom></loginRegCom>
                    </a-modal>

                </div>

            </nav>

        </div>
    </div>
</template>

<script>
import loginRegCom from "@/components/LoginRegCom.vue"
import ClassifyList from "@/views/index/components/ClassifyList.vue"
import { logout } from "@/api/request"
export default {
    name: 'TopNavCom',
    data() {
        return {
            flag: false,//控制是否显示课程分类列表
            keyword: '',
            oldKeyword: '',

        }
    },
    components: {
        ClassifyList,
        loginRegCom
    },
    created() {
        this.keyword = this.$route.query.keyword || ''
        this.oldKeyword = this.$route.query.keyword || ''
        this.$store.commit('setShowModel', false);
    },
    methods: {
        // 通过state 控制显示登录注册模态框
        showModal() {
            this.$store.commit("setShowModel", true);
        },
        hideModel() {
            this.$store.commit("setShowModel", false);
        },
        // 跳转到搜索页
        goToSearch() {
            // 判断当前路由是否为搜索页
            // 若不是，则直接跳转搜索页
            if (this.$route.path != '/search') {
                this.$router.push({
                    path: '/search',
                    query: {
                        pageNum: 1,
                        pageSize: 15,
                        type: '',
                        subjectId: '',
                        keyword: this.keyword,
                        courseType: ''
                    }
                })
            }
            else {
                // 若是搜索页，则判断keyword是否变化
                // 不变，则不做处理
                if (this.keyword == this.oldKeyword) {
                    return;
                }
                // 若变化，则直接push
                else {
                    this.$router.push({
                        path: '/search',
                        query: {
                            pageNum: 1,
                            pageSize: 15,
                            type: '',
                            subjectId: '',
                            keyword: this.keyword,
                            courseType: ''
                        }
                    })
                }
            }
            this.oldKeyword = this.keyword;
        },
        // 登出
        userLogout() {
            logout().then((result) => {
                if (result.code == 0) {
                    // 清空state的信息
                    this.$store.commit('setIsLogin', false);
                    this.$store.commit('setUserInfo', {});
                    this.$store.commit('setShoppingCartList', {})
                    this.$store.commit('setCount', 0);
                    if (this.$route.path == '/personal' || this.$route.path == '/chart') {
                        this.$router.push('/');
                    }
                }
            }).catch((err) => {
                console.log(err);
            });
        },
        // 跳转到购物车
        goToChart() {

            if (this.$route.path == '/chart') {
                this.$message.warning('已经在购物车了')
                return;
            }
            this.$router.push('/chart');
        }

    },
    watch: {
        // 购物车数量同步
        '$store.state.shoppingCartList': {
            handler() {
                if (this.$store.state.shoppingCartList && Object.keys(this.$store.state.shoppingCartList).length > 0) {
                    this.$store.commit('setCount', this.$store.state.shoppingCartList.length);
                }
                else {
                    this.$store.commit('setCount', 0);
                }
            }
        }
    }

}
</script>

<style lang="less" scoped>
#classify-list {
    z-index: 999;
    position: absolute;
    top: 50px;
    left: 30%;
}

#nav-top-box {
    width: 100%;
    margin: auto;
}

.nav-scroll {
    // display: none;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: white;
}

.nav-container {
    width: 100%;
    height: 80px;

    background: white;

    a {
        text-decoration: none;
    }

    .logo {
        width: 100%;
        text-align: center;

        >img {
            margin: 50px auto;
        }

    }

    nav {
        width: 1160px;
        height: 80px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            ul {
                display: flex;
                align-items: center;

                li {
                    list-style: none;
                    padding: 10px 20px;

                    a {
                        font-size: 16px;
                        font-weight: bold;
                        color: #000;
                    }
                }
            }
        }

        .right {
            display: flex;
            align-items: center;

            // position: absolute;
            .search-box {
                display: flex;
                align-items: center;

                input {
                    outline: none;
                    width: 200px;
                    height: 40px;
                    padding-left: 20px;
                    border-radius: 20px 0 0 20px;
                    border: 1px solid #d9d9d9;
                    box-sizing: border-box;
                }

                span {
                    background-color: rgb(0, 178, 120);
                    height: 40px;
                    display: inline-block;
                    padding: 12px 20px;
                    border-radius: 0 20px 20px 0;
                    border: 1px solid #d9d9d9;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    svg {
                        width: 30px;
                        height: 30px;
                        

                        path {
                            fill: rgb(247, 253, 253)
                        }

                    }
                }
            }

            .chart-box {
                margin: 0 20px;
                width: 36px;
                height: 36px;
                background: #fff;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23);

                >div {
                    width: 24px;
                    height: 24px;

                    svg {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .lr-box {
                border-radius: 15px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 94px;
                height: 30px;
                background: #fff;
                font-weight: bold;
                line-height: 30px;
                font-size: 15px;
                position: relative;
                box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .23);



            }

            .user-info-box {
                display: flex;

                .user-avatar {
                    margin-right: 5px;
                }

                .user-info {
                    >div:first-of-type {
                        font-size: 14px;
                        font-weight: bold;
                    }

                    >div:nth-of-type(2) {
                        color: #ab753f;
                        font-weight: bold;
                    }
                }
            }

            .user-popover-content-item {
                color: red;
            }

        }


    }


}
</style>

<style>
.userApproveItem {
    color: black !important;
    padding: 5px 10px !important;
}

.userApproveItem a {
    color: black !important;
}

.ant-popover-inner-content {
    padding: 5px !important;
}

.userApproveItem:hover,
.userApproveItem a:hover {
    background-color: rgb(230, 255, 243) !important;
    color: rgb(0, 207, 140) !important;
}

.ant-badge-count {
    top: -12px !important;
    right: -25px !important;
}

.ant-modal {
    width: 440px !important;
}
</style>